import { FC, useState, useEffect } from "react"
import styles from "./index.less"
import { Form, Input, Button, Checkbox, Row, Col, Radio, Upload, message } from "antd"
import { getEnum, enumTypeList, ITypeEnum, uploadFile } from "@/services/common"
import { IPatient, addPatient } from "@/services/patient"

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 13 },
}

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
}


const addAndEditPatient: FC = () => {

  const [tag, setTag] = useState<string>()// 文件标签
  const [tagList, setTagList] = useState<Array<ITypeEnum>>([])// 文件标签列表
  const [type, setType] = useState<number>(1)// 患者门诊类型
  const [typeList, setTypeList] = useState<Array<ITypeEnum>>([])// 患者门诊列表
  const [sex, setSex] = useState<number>()// 性别
  const [sexList, setSexList] = useState<Array<ITypeEnum>>([])// 性别类型
  const [fileId, setFileId] = useState<number>()// 文件id
  const [subLoading, setSubLoading] = useState<boolean>(false)


  /**
  * 获取住院类型与文件上传类型
  */
  const getTagList = () => {
    // 患者住院类型
    getEnum(enumTypeList.patientType, false).then(res => {
      console.log(res);
      (res.data) && (setTypeList(res.data))
    })
    // 文件类型
    getEnum(enumTypeList.consultAnnex, false).then(res => {
      (res.data) && (setTagList(res.data))
    })
    // 性别
    getEnum(enumTypeList.sex, false).then(res => {
      (res.data) && (setSexList(res.data))
    })
  }

  const onFinish = (values: any) => {
    console.log("Success:", values)
    addPatient({ ...values }).then(res => {
      console.log(res)
    }).catch(error => {
      message.error(error.message)
    })
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo)
  }

  /**
   * 上传文件
   */
  const upFile = (e: any) => {
    // uploadFile
    console.log(e.file)
    let file = new FormData()
    file.append("file", e.file)
    file.append("file5", e.file)
    uploadFile(file).then(res => {
      console.log(res)
    }).catch(error => {
      message.error(error.message)
    })
  }

  useEffect(() => {
    getTagList()
  }, [])

  const [form] = Form.useForm()

  /**
   * 提交表单
   */
  const subEditPatient = async () => {
    try {
      const values = await form.validateFields()
      console.log("Success:", values)
    } catch (errorInfo) {
      // console.log("Failed:", errorInfo)
    }
  }

  return (
    <div className={styles.editPatientBox}>
      <div className={styles.editPatientMain}>
        <Form
          form={form}
          {...layout}
          name="basic"
          initialValues={{ deptCode: 1, outpatientHospitalized: 888 }}
          onFinish={onFinish}
        // onFinishFailed={subEditPatient}
        >
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                labelAlign="left"
                label="患者姓名"
                name="name"
                rules={[{ required: true, message: "请输入患者姓名 " }]}
              >
                <Input placeholder="请输入患者姓名" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                labelAlign="right"
                label="患者性别"
                name="sex"
                rules={[{ required: true, message: "请选择患者性别 " }]}
              >
                <Radio.Group className={styles.radioGroupList}>
                  {
                    sexList.map(item => {
                      return <Radio key={item.value} value={item.value} >{item.str}</Radio>
                    })
                  }
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                labelAlign="left"
                label="门诊/住院号"
                name="outpatientHospitalized"
                rules={[{ required: true, message: "请输入门诊/住院号 " }]}
              >
                <Input placeholder="请输入门诊/住院号" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                labelAlign="right"
                label="患者来源"
                name="type"
                rules={[{ required: true, message: "请选择患者来源 " }]}
              >
                <Radio.Group className={styles.radioGroupList}>
                  {
                    typeList.map((item, index) => {
                      return <Radio key={item.value} value={item.value} >{item.str}</Radio>
                    })
                  }
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                labelAlign="left"
                label="门诊/出生日期"
                name="birthday"
                rules={[{ required: true, message: "请输入出生日期 " }]}
              >
                <Input placeholder="请输入出生日期" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                labelAlign="right"
                label="联系方式"
                name="phone"
              >
                <Input placeholder="请输入联系方式" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                labelAlign="left"
                label="主要诊断"
                name="diagnosis"
                rules={[{ required: true, message: "请输入患者姓名 " }]}
              >
                <Input.TextArea rows={4} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                labelAlign="right"
                label="科室"
                name="deptCode"
                rules={[{ required: true, message: "请选择科室 " }]}
              >
                <div>新增</div>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                labelAlign="left"
                label="患者资料"
                name="crPatientData"
              >
                <div className={styles.addTypeBox}>
                  <div className={styles.typeList}>
                    {
                      tagList.map(item => {
                        return (
                          <div key={item.value} className={styles.typeItemBox}>
                            <Upload className={styles.typeItemUpload} customRequest={(e) => { upFile(e) }}>文件</Upload>
                            <div key={item.value} className={styles.typeItem}>
                              +{item.str}
                            </div>
                          </div>

                        )

                      })
                    }
                  </div>
                </div>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24} justify="center">
            <Col>
              <Form.Item>
                <Button >
                  取消
                </Button>
              </Form.Item>
            </Col>
            <Col>
              <Form.Item>
                <Button loading={subLoading} onClick={() => { subEditPatient() }} type="primary" htmlType="submit">
                  确定
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>

    </div >
  )
}

export default addAndEditPatient